<template>
  <view class="qimen-grid">
    <!-- 9x9大方格 -->
    <view class="grid-container">
      <view 
        v-for="(palace, pIndex) in 9" 
        :key="pIndex"
        class="palace"
      >
        <!-- 每个宫位的9x9小方格 -->
        <view class="sub-grid">
          <view 
            v-for="(cell, cIndex) in 12" 
            :key="cIndex"
            class="cell"
          >
            <!-- 根据位置显示不同的内容 -->
            <text v-if="getCellContent(pIndex, cIndex)" class="cell-text">
              {{ getCellContent(pIndex, cIndex) }}
            </text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'QimenGrid',
  props:["gridData"],
  data() {
    return {
      // 示例数据结构
    //   gridData: {
    //     0: { // 天蓬宫
    //       0: '',
    //       1: '',
    //       2: '',
    //       3: '生门',
    //       4: '戊',
		  // 5: '戊',
		  // 6: '戊',
		  // 7: '戊',
		  // 8: '戊',
		  // 9: '戊',
		  // 10: '戊',
		  // 11: '戊',
    //     },
    //     1: { // 天芮宫
    //       0: '天辅',
    //       2: '丙',
    //       5: '死门',
    //       7: '己'
    //     }
    //     // ... 其他宫位数据
    //   }
	// gridData
    }
  },
  methods: {
    getCellContent(palaceIndex, cellIndex) {
      // 从数据中获取对应位置的内容
      if (this.gridData[palaceIndex] && this.gridData[palaceIndex][cellIndex]) {
        return this.gridData[palaceIndex][cellIndex]
      }
      return ''
    }
  }
}
</script>

<style lang="scss" scoped>
.qimen-grid {
  width: 100%;
  aspect-ratio: 1;
  padding: 4rpx;
  background-color: #eee;
  
  .grid-container {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 4rpx;
    
    .palace {
      background-color: #fff;
      padding: 4rpx;
      
      .sub-grid {
        width: 100%;
        height: 100%;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(4, 1fr);
        gap: 2rpx;
        background-color: #f5f5f5;
        
        .cell {
          background-color: #fff;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 24rpx;
          
          .cell-text {
            color: #333;
            
            &.highlight {
              color: #f56c6c;
            }
            
            &.emphasis {
              font-weight: bold;
            }
          }
        }
      }
    }
  }
}
</style> 